<template>
  <div class="mycourse-container">
    <SMycourseSidebar />
    <div class="content-container">
      <h2>同学，您好。欢迎使用AIGC智育优学教育平台。</h2>
      <div class="course-cards">
        <div v-for="course in courses" :key="course.id" class="course-card" @click="navigateToCourse(course.id)">
          {{ course.name }}
        </div>
        <div class="course-card" @click="router.push('/ai/ai_conversion')">
          <div class="ai-assistant-card">
            <img src="@/assets/svgs/AIBot2.svg" alt="伴学助手" />
            <div>伴学助手</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import SMycourseSidebar from '@/components/SMycourseSidebar.vue';
import emitter from '@/utils/eventBus';

const router = useRouter();
const courses = ref([
  { id: 1, name: '贵大' },
  { id: 2, name: '实训' },
  { id: 3, name: '数学' }
]);

const navigateToCourse = (courseId) => {
  router.push(`/student/mycourse/details/${courseId}`);
};

const fetchCourseList = async () => {
  try {
    // 这里添加获取课程列表的API调用
    // const response = await api.getCourses();
    // courses.value = response.data;
  } catch (error) {
    console.error('获取课程列表失败:', error);
  }
};

onMounted(() => {
  console.log('组件已挂载');
  console.log('当前课程数据:', courses.value);
  fetchCourseList();
  
  emitter.on('course-added', () => {
    fetchCourseList();
  });
});


</script>

<style scoped>
.mycourse-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.steps-container {
  margin-right: 20px;
}

.content-container {
  margin-top: 50px;
  flex: 1;
  padding: 0 20px;
}

.course-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px 0;
  max-width: 1200px;
}

.course-card {
  aspect-ratio: 1;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  max-width: 250px;
  max-height: 250px;
  font-size: 18px;
  margin: 0 auto;
  width: 100%;
}

.course-card:not(:has(.ai-assistant-card)) {
  background-color: #f0f0f0;
}

:deep(.el-step__head.is-process) {
  color: #43a1e4;
  border-color: #43a1e4;
}

:deep(.el-step__head.is-wait) {
  color: #43a1e4;
  border-color: #43a1e4;
}

:deep(.el-step__head.is-finish) {
  color: #43a1e4;
  border-color: #43a1e4;
}

:deep(.el-step__icon.is-text),
:deep(.el-step__icon-inner) {
  color: #43a1e4;
}

:deep(.el-step__line) {
  background-color: #43a1e4;
}

:deep(.el-step__title) {
  color: #43a1e4 !important;
  font-weight: normal !important;
}

:deep(.el-step__title.is-process),
:deep(.el-step__title.is-wait),
:deep(.el-step__title.is-finish) {
  color: #43a1e4 !important;
  font-weight: normal !important;
}

.ai-assistant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #13227a;
  color: white;
  border-radius: 8px;
}

.ai-assistant-card img {
  width: 45%;
  height: auto;
  margin-bottom: 10px;
}

</style>
